<div class="userinfo">
    <div class="icon"><img src="../public/all/images/phone/avatar.png" height="60px"/></div>
    <div class="userdetail">
        欢迎您！<span class="name">--</span> <br/>
        <span class="line2">
            账户余额：<span class="red"> 0.00 </span>RMB
        </span>
    </div>
    <div class="clear"></div>
</div>

<div class="common_item account">
    <table class="with-title-input">
        <tr>
            <td class="title">账 号</td>
            <td class="input">
                --
            </td>
        </tr>
    </table>
</div>

<div class="common_item realname">
    <table class="with-title-input">
        <tr>
            <td class="title">真实姓名</td>
            <td class="input">
                <input type="text" class="am-form-field"/>
            </td>
        </tr>
    </table>
</div>

<div class="common_item">
    <table class="with-title-input">
        <tr>
            <td class="title">币 别</td>
            <td class="input">
                <div>RMB</div>
            </td>
        </tr>
    </table>
</div>

<div class="common_item qq">
    <table class="with-title-input">
        <tr>
            <td class="title">联系QQ</td>
            <td class="input">
                <input type="number" class="am-form-field"/>
            </td>
        </tr>
    </table>
</div>

<div class="common_item wechat">
    <table class="with-title-input">
        <tr>
            <td class="title">联系微信</td>
            <td class="input">
                <input type="text" class="am-form-field"/>
            </td>
        </tr>
    </table>
</div>

<div class="common_item phone">
    <table class="with-title-input">
        <tr>
            <td class="title">手机号</td>
            <td class="input">
                <input type="number" class="am-form-field"/>
            </td>
        </tr>
    </table>
</div>

<div style="margin: 10px 15px 10px 15px;" >
    <button type="button" class="am-btn am-btn-primary btn-save common_button">确认修改</button>
</div>

<style type="text/css">
    .userinfo {
        height: 80px;
        border-top: 1px solid #b8b8b8;
        border-bottom: 1px solid #b8b8b8;
        background-color: #eeeeee;
        color: #000;
        font-weight: bold;
    }
    .userinfo .icon {
        float: left;
        width: 90px;
        text-align: right;
        padding-top: 10px;
    }
    .userinfo .userdetail {
        float: left;
        margin-left: 10px;
        margin-top: 15px;
    }
    .userinfo .userdetail .line2 {
        font-size: 14px;
        color: #838383;
    }
</style>

<script>
    ME.cb = function() {
        fillUserInfo();
    }
    function fillUserInfo() {
        if (context.user) {
            $(".userinfo .name").html(context.user.user.mobile || '游客');
            $(".userinfo .line2 .red").html(" " + (context.user.balance / 100).toFixed(2) + " ");

            $(".account .input").html("<div>" + (context.user.user.mobile || "游客") + "</div>");
            if (context.user.user.name)
                $(".realname .input").html("<div>" + context.user.user.name + "</div>");
            else
                $(".realname input").val("");
            
            $(".qq input").val(context.user.user.qq || '');
            $(".wechat input").val(context.user.user.wechat || '');
            $(".phone input").val(context.user.user.phone || '');
        }
    }
    fillUserInfo();

    $(".btn-save").click(function() {
        startLoading();
        var data = {
            qq: $(".qq input").val().trim(),
            wechat: $(".wechat input").val().trim(),
            phone: $(".phone input").val().trim(),
        };
        if ($(".realname input").val()) {
            data.name = $(".realname input").val();
        }
        CMD.modify_user_info(null, data, function() {
            stopLoading();
            alert2("信息修改完成！");
        });
    });
</script>